<template>
  <div class="outbound-management">
    <!-- 操作栏：新增按钮 + 搜索 -->
    <div class="operation-bar">
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd" class="add-btn">+ 新增出库</el-button>
      <div class="search-group">
        <el-input
          v-model="searchForm.boundCode"
          placeholder="请输入出库单号"
          class="search-input"
          @keyup.enter="handleSearch"
        />
        <el-button type="primary" icon="el-icon-search" @click="handleSearch" class="search-btn">搜索</el-button>
        <el-button type="primary" icon="el-icon-filter" @click="handleFilter" class="filter-btn">筛选</el-button>
      </div>
    </div>

    <!-- 出库单表格 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
        class="data-table"
      >
        <el-table-column label="序号" type="index" width="40" align="center" />
        <el-table-column prop="boundCode" label="单号" width="130" align="center" />
        <el-table-column prop="operationStatus" label="操作状态" width="80" align="center">
          <template slot-scope="scope">
            <el-tag type="warning" size="small">{{ scope.row.operationStatus || '出库' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="制单人" width="80" align="center" />
        <el-table-column prop="creatorTime" label="出库时间" width="100" align="center">
          <template slot-scope="scope">
            {{ formatDate(scope.row.creatorTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="supplierName" label="供应商" width="100" align="center" />
        <el-table-column prop="communityName" label="出库仓库" width="100" align="center" />
        <el-table-column prop="communityName" label="仓库归属" width="100" align="center" />
        <el-table-column prop="boundDesc" label="备注" width="142" align="center">
          <template slot-scope="scope">
            {{ scope.row.boundDesc || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)" class="action-btn">查看出库单</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)" class="action-btn">修改</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)" class="action-btn">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        layout="prev, pager, next, jumper, sizes, total"
        :total="pagination.total"
        class="pagination"
      />
    </div>

    <!-- 查看出库单详情弹窗 -->
    <el-dialog
      title="出库单详情"
      :visible.sync="viewDialogVisible"
      width="80%"
      :close-on-click-modal="false"
    >
      <BoundDetailView
        :boundId="currentBoundId"
        @close="viewDialogVisible = false"
      />
    </el-dialog>

    <!-- 修改出库单弹窗 -->
    <EditOutboundDialog
      :visible.sync="editDialogVisible"
      :boundId="currentBoundId"
      @success="handleEditSuccess"
    />
  </div>
</template>

<script>
import { boundApi } from '@/api/bound'
import BoundDetailView from './components/BoundDetailView.vue'
import EditOutboundDialog from './components/EditOutboundDialog.vue'

export default {
  name: 'OutWarehouse',
  components: {
    BoundDetailView,
    EditOutboundDialog
  },
  data() {
    return {
      loading: false,
      tableData: [],
      viewDialogVisible: false,
      editDialogVisible: false,
      currentBoundId: '',
      searchForm: {
        boundCode: ''
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 加载数据
    async loadData() {
      this.loading = true
      try {
        const params = {
          current: this.pagination.currentPage,
          size: this.pagination.pageSize,
          boundCode: this.searchForm.boundCode || undefined,
          boundStatus: 2 // 只查询出库状态的数据
        }
        
        const response = await boundApi.getBoundPage(params)
        if (response.code === 200) {
          this.tableData = response.data.records || []
          this.pagination.total = response.data.total || 0
          this.pagination.currentPage = response.data.current || 1
        } else {
          this.$message.error(response.message || '查询失败')
        }
      } catch (error) {
        console.error('查询出库单列表失败:', error)
        this.$message.error('查询失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1
      this.loadData()
    },

    // 筛选
    handleFilter() {
      // TODO: 实现筛选功能
      this.$message.info('筛选功能待实现')
    },

    // 新增
    handleAdd() {
      this.$router.push('/property-management/add-outbound')
    },

    // 编辑
    handleEdit(row) {
      // 打开修改弹窗
      this.currentBoundId = row.boundId
      this.editDialogVisible = true
    },

    // 查看详情
    handleView(row) {
      this.currentBoundId = row.boundId
      this.viewDialogVisible = true
    },

    // 修改成功回调
    handleEditSuccess() {
      this.loadData() // 重新加载数据
    },

    // 删除
    handleDelete(row) {
      this.$confirm('确定要删除这个出库单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const response = await boundApi.deleteBound(row.boundId)
          if (response.code === 200) {
            this.$message.success('删除成功')
            this.loadData()
          } else {
            this.$message.error(response.message || '删除失败')
          }
        } catch (error) {
          console.error('删除出库单失败:', error)
          this.$message.error('删除失败，请稍后重试')
        }
      }).catch(() => {
        // 用户取消删除
      })
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
      this.loadData()
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.loadData()
    },

    // 格式化日期
    formatDate(date) {
      if (!date) return '--'
      const d = new Date(date)
      return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.outbound-management {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

/* 操作栏 */
.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.add-btn {
  background-color: #67c23a;
  border-color: #67c23a;
  color: #fff;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 6px;
  transition: all 0.3s;
}

.add-btn:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}

.search-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-input {
  width: 240px;
}

.search-input .el-input__inner {
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  transition: border-color 0.3s;
}

.search-input .el-input__inner:focus {
  border-color: #409eff;
}

.search-btn,
.filter-btn {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  border-radius: 6px;
  padding: 10px 20px;
  transition: all 0.3s;
}

.search-btn:hover,
.filter-btn:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 表格容器 */
.table-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.data-table {
  border-radius: 8px;
  overflow: hidden;
}

.data-table th {
  background-color: #f5f7fa;
  color: #333;
  font-weight: 600;
  text-align: center;
}

.data-table td {
  padding: 12px 0;
  text-align: center;
}

.action-btn {
  color: #409eff;
  font-weight: 500;
  transition: color 0.3s;
}

.action-btn:hover {
  color: #66b1ff;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination {
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .outbound-management {
    padding: 10px;
  }
  
  .operation-bar {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .search-group {
    justify-content: center;
  }
  
  .search-input {
    width: 200px;
  }
  
  .table-container {
    padding: 15px;
    overflow-x: auto;
  }
  
  .data-table {
    min-width: 800px;
  }
}
</style>